Helló,我是Charlie!
在Day21當中我們完成了後端的paypal sdk,在今天我們將完成前端結帳的部分。
================================◉‿◉=================================
首先是結帳的部分,在createOrder裡面的checkout新增導向approve link的程式碼:
checkout(){
var username = window.localStorage.getItem("username")
var token = window.localStorage.getItem("token")
createOrderData(username,token).then((response) => {
if(response.data.code == STATUS_OK){
window.localStorage.setItem('orderID',response.data.data.orderid)
window.location.href = response.data.link.approve
}else{
this.$fire({type:"error",text:response.data.data})
}
})
},
接著創立兩個vue:orderCreated跟orderCanceled,並且設立路由:
{
path: "/orderCreated",
name:"createPaypalPage",
component: orderCreated,
meta: {
title: "付款建立"
}
},
{
path: "/orderCanceled",
name: "cancalOrderPage",
component: orderCanceled,
meta: {
title: "付款取消"
}
}
接著在order.js當中,新增打capture order的API:
export function captureOrder(orderID,token){
return axios.post(`http://${host()}:${port()}/userorder/capture/${orderID}`,{
headers:{
"AUTHORIZATION":token
}
})
}
接著修改orderCreated.vue,讓這個vue顯示付款成功或者付款失敗:
<template>
<html lang="zh-Hant-TW">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/x-con" href="@/assets/favicon.ico">
<div id="app">
<headerComponent></headerComponent>
<div class="info" style="margin:0 auto;width: 50%;height: 50%;text-align: center;">
<img :src="successImage" alt="" style="width:300px;height: 300px;">
<h4>{{ successText }}</h4>
</div>
</div>
</html>
</template>
<script>
import { captureOrder } from '@/apis/order.js'
import { STATUS_OK } from '@/apis/constant.js'
export default{
name: "orderCreated",
components:{
'headerComponent':() => import('@/components/header.vue')
},
data(){
return {
successImage:"",
successText: ""
}
},
created(){
var orderid = window.localStorage.getItem("orderID")
console.log(orderid)
var token = window.localStorage.getItem("token")
captureOrder(orderid,token).then((response) => {
console.log(response)
if(response.status == STATUS_OK){
this.successImage = "https://i.imgur.com/mBolVrx.jpg"
this.successText = "付款成功"
}else{
this.successImage = "https://i.imgur.com/EJjpUGf.png"
this.successText = "付款失敗"
}
})
}
}
</script>
cancel的話就是固定頁面,這裡就不贅述了。
接著便可測試是否能結帳成功:
================================◉‿◉=================================
Day22結束了!在今天我們完成了前端的付款,而明天我們將實作訂單API的部分,See ya next day!